﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Statistics_MemberActivityList.aspx.cs" Inherits="Youz.CreditRepay.Manage.Statistics.Statistics_MemberActivityList" %>

<div class="row">

    <div class="col-sm-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h2><i class="fa "></i>最近15天活跃度</h2>
                <%--                <div style="float: right"><a href="javascript:;" onclick="initPager('Month')">月</a></div>
                <div style="float: right"><a href="javascript:;" onclick="initPager('Week')">周</a></div>
                <div style="float: right"><a href="javascript:;" onclick="initPager('Day')">日</a></div>--%>
            </div>
            <div class="panel-body">
                <div id="facebookChart" style="height: 300px"></div>
            </div>
        </div>
    </div>

    <div class="col-sm-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h2><i class="fa "></i>最近15天活跃度</h2>
            </div>
            <div class="panel-body">
                <div id="TradeChart" style="height: 300px"></div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var likes;
    $(function () {
        initPager();
        initPagerTrade();
    });
    function Chart(arr) {
        /* ---------- Chart with points ---------- */
        if ($("#facebookChart").length) {
            var plot = $.plot($("#facebookChart"),
                   [{ data: arr, label: "登录" }], {
                       series: {
                           lines: {
                               show: true,
                               lineWidth: 2,
                               fill: true, fillColor: { colors: [{ opacity: 0.5 }, { opacity: 0.2 }] }
                           },
                           points: {
                               show: true,
                               lineWidth: 2
                           },
                           shadowSize: 0
                       },
                       grid: {
                           hoverable: true,
                           clickable: true,
                           tickColor: "#f9f9f9",
                           borderWidth: 0
                       },
                       colors: ["#3B5998"],
                       xaxis: { ticks: 6, tickDecimals: 0 },
                       yaxis: { ticks: 3, tickDecimals: 0 },
                   });

            function showTooltip(x, y, contents) {
                $('<div id="tooltip">' + contents + '</div>').css({
                    position: 'absolute',
                    display: 'none',
                    top: y + 5,
                    left: x + 5,
                    border: '1px solid #fdd',
                    padding: '2px',
                    'background-color': '#dfeffc',
                    opacity: 0.80
                }).appendTo("body").fadeIn(200);
            }

            var previousPoint = null;
            $("#facebookChart").bind("plothover", function (event, pos, item) {
                $("#x").text(pos.x.toFixed(2));
                $("#y").text(pos.y.toFixed(2));

                if (item) {
                    if (previousPoint != item.dataIndex) {
                        previousPoint = item.dataIndex;

                        $("#tooltip").remove();
                        var x = item.datapoint[0],
							y = item.datapoint[1].toFixed(2);

                        showTooltip(item.pageX, item.pageY,
									+y + "(" + x + ")");//item.series.label + " of " + x + " = " + y
                    }
                }
                else {
                    $("#tooltip").remove();
                    previousPoint = null;
                }
            });

        }
    }

    function initPager() {
        var str;
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "Member/Handlers/Member_InfoHandler.ashx?type=ActiveVolume",
            queryParams: {
            },
            success: function (data) {
                var arr = new Array();

                $(data.data).each(function (i, item) {
                    arr.push([item.CreateDate, item.ActiveVolume]);
                })
                Chart(arr);
            },
            error: function (message) {
            }
        });
    }

    function initPagerTrade() {
        var str;
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "Member/Handlers/Member_InfoHandler.ashx?type=TradeActiveVolume",
            queryParams: {
            },
            success: function (data) {
                var arr = new Array();

                $(data.data).each(function (i, item) {
                    arr.push([item.CreateTime, item.ActiveVolume]);
                })
                TradeChart(arr);
            },
            error: function (message) {
            }
        });
    }

    function TradeChart(arr) {
        /* ---------- Chart with points ---------- */
        if ($("#TradeChart").length) {
            var plot = $.plot($("#TradeChart"),
                   [{ data: arr, label: "交易" }], {
                       series: {
                           lines: {
                               show: true,
                               lineWidth: 2,
                               fill: true, fillColor: { colors: [{ opacity: 0.5 }, { opacity: 0.2 }] }
                           },
                           points: {
                               show: true,
                               lineWidth: 2
                           },
                           shadowSize: 0
                       },
                       grid: {
                           hoverable: true,
                           clickable: true,
                           tickColor: "#f9f9f9",
                           borderWidth: 0
                       },
                       colors: ["#3B5998"],
                       xaxis: { ticks: 6, tickDecimals: 0 },
                       yaxis: { ticks: 3, tickDecimals: 0 },
                   });

            function showTooltip(x, y, contents) {
                $('<div id="tooltip">' + contents + '</div>').css({
                    position: 'absolute',
                    display: 'none',
                    top: y + 5,
                    left: x + 5,
                    border: '1px solid #fdd',
                    padding: '2px',
                    'background-color': '#dfeffc',
                    opacity: 0.80
                }).appendTo("body").fadeIn(200);
            }

            var previousPoint = null;
            $("#TradeChart").bind("plothover", function (event, pos, item) {
                $("#x").text(pos.x.toFixed(2));
                $("#y").text(pos.y.toFixed(2));

                if (item) {
                    if (previousPoint != item.dataIndex) {
                        previousPoint = item.dataIndex;

                        $("#tooltip").remove();
                        var x = item.datapoint[0],
							y = item.datapoint[1].toFixed(2);

                        showTooltip(item.pageX, item.pageY,
									+y + "(" + x + ")");//item.series.label + " of " + x + " = " + y
                    }
                }
                else {
                    $("#tooltip").remove();
                    previousPoint = null;
                }
            });

        }
    }
</script>
